<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="边界定时任务" name="first">
        <el-form-item label="编号" required>
          <el-input v-model= "id" readonly></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model= "name"></el-input>
        </el-form-item>
        <el-form-item label="持续的时间" required>
          <el-input v-model= "timeDuration"></el-input>
          事例:<br/>
          PT5M：间隔5分钟<br/>
          PT2H：间隔2小时<br/>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import elementHelper from "@/views/flow/act/edit-modeler/js/helper/ElementHelper";

  const forEach = require('lodash/forEach');

  // 用户任务属性组件
  export default {
    props:['element'],
    inject: ['bpmnModeler'],
    data(){
      return {
        activeName: 'first',
        modeling: null,
        bpmnFactory: null,
        id: this.element.id || '',
        ruleNumberString: '',
        name: '',
        documentation: '',
        timeDuration: '',
      }
    },
    methods:{
    },
    mounted() {
      const bpmnModeler = this.bpmnModeler();
      this.modeling = bpmnModeler.get('modeling');
      this.bpmnFactory = bpmnModeler.get('bpmnFactory');
    },
    //监视器
    watch:{
      name: {
        handler(newVal, oldVal) {
          this.modeling.updateProperties(this.element,{'name': newVal});
          console.log(this.element)
          console.log('element.businessObject')
          console.log(this.element.businessObject)
        }
      },
      timeDuration: {
        handler(newVal, oldVal) {
          // this.modeling.updateProperties(this.element,{'timerEventDefinition.timeDuration': newVal});
          const businessObject = this.element.businessObject;
          let eventDefinitions = businessObject.get('eventDefinitions');

          let length = eventDefinitions.length;
          console.log("length:"+length)
          for (let i = 0; i < length; i++) {
            // 清除旧值
            eventDefinitions.pop();
          }

          let timerEventDefinition = elementHelper.createElement('bpmn:TimerEventDefinition', null, this.element, this.bpmnFactory);
          let expression = elementHelper.createElement('bpmn:Expression', null, this.element, this.bpmnFactory);
          expression.body = newVal;
          timerEventDefinition.timeDuration = expression;
          eventDefinitions.push(timerEventDefinition)
          //
          businessObject.set('eventDefinitions',eventDefinitions)

        }
      },
      //监视元素变化
      element:{
        deep: true,
        immediate: true,
        handler(newVal,oldVal){
            const bpmnModeler = this.bpmnModeler();
            const modeling = bpmnModeler.get('modeling');
            const businessObject = newVal.businessObject;
            this.name = businessObject.name;
            if (businessObject.eventDefinitions && businessObject.eventDefinitions.length>0 && businessObject.eventDefinitions[0].timeDuration) {
              this.timeDuration = businessObject.eventDefinitions[0].timeDuration.body;
            }
        }
      },

    }

  }
</script>
<style>

</style>
